<template>
    <!-- 组件的结构 -->
    <div>
        <h1>{{ msg }}</h1>
        <h2>学生姓名：{{ name }}</h2>
        <h2>学生性别：{{ sex }}</h2>
        <h2>学生年龄：{{ newAge + 1 }}</h2>
        <button @click="updateAge">尝试修改接收到的年龄</button>
    </div>
</template>

<script>
    export default {
        // eslint-disable-next-line vue/multi-word-component-names
        name: "Stuent",
        data() {
            return {
                msg: "我是瑞子的人",
                newAge: this.age,
            };
        },
        components: {},
        //  声明接收的属性,很简单接收(第一种)
        //  props: ["name", "age", "sex"],
        //  第二种 接收的同时对类型进行限制
        /*  props: {
          name: String,
          age: Number,
          sex: String,
        }, */
        //  第三种 接收的同时对类型进行限制 + 默认值的制定 +必要值的限制
        props: {
            name: {
                //  name 的类型
                type: String,
                // 名字是必传的
                require: true,
            },
            age: {
                //  age 的类型
                type: Number,
                // 不传默认值是99
                default: 99,
            },
            sex: {
                //  sex 的类型
                type: String,
                // 性别是非必传的
                require: false,
            },
        },
        methods: {
            updateAge() {
                this.newAge = 185;
            },
        },
    };
</script>

